<script>
import Vue from "vue"
import { basisComponents } from "@/low-code-components/basis-components/setting/index";
import { businessComponents } from "@/low-code-components/business-components/setting/index";
import formConfig from "./form-config/index";
let components = { ...basisComponents, ...businessComponents,   };
components.formConfig = formConfig;

import selectModel from "@/low-code/components/select-model/"

 Vue.component("select-model", selectModel);

export default {
  components: components,
  props: ["store"],
  data() {
    return {
      onlyActive: "onlyfirst",
      getStore: () => {
        return this.store;
      },
    };
  },
  // eslint-disable-next-line no-unused-vars
  render(h) {
    return this.component ? (
      <div
        class={("item", "settting")}
        data-key={this.store.current.key}
        key={this.store.current.key}
      >
        {this.drawingComponent}
      </div>
    ) : (
      <div>
        <h3 class="form-config-title">表单属性</h3>
        <form-config store={this.store} class="form-config"></form-config>
      </div>
    );
  },
  computed: {
    component() {
      return this.store.current.type;
    },
    drawingComponent() {
      if (!this.component) {
        return null;
      }
      const Tag = this.component;
      return <Tag></Tag>;
    },
  },
};
</script>


<style >
.settting .el-tabs__nav {
  width: 100%;
}
.settting .el-tabs__active-bar {
  background-color: unset;
}

.settting .el-input__inner,
.form-config .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.prop-set-title {
  line-height: 32px;
  font-size: 13px;
  padding-left: 8px;
}
.el-col {
  margin-bottom: 5px;
}

.form-config-title {
  line-height: 32px;
  text-align: center;
  font-size: 18px;
  color: #606266;
}
</style>